<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计时器-面试小工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" type="image/png" sizes="32x32" href="image/logo.png"/>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 身体部分 -->
    <!-- 播放器 -->
    <script src="js/jquery.min.js"></script>
    <link rel='stylesheet' type="text/css" href="css/audio/audioplayer_1.css"/>
    <link rel='stylesheet' type="text/css" href="css/page/index.css"/>
    <script src="js/audio/wavesurfer.min.js" type="text/javascript"></script>
    <script src="js/audio/wavesurfer.cursor.min.js" type="text/javascript"></script>
    <style>
        /*设置数据表表头字体*/
        .layui-table th {
            /*表头内容居中显示*/
            text-align: center;
        }

        .layui-table-cell {
            text-align: center;
            border-radius: 4px;
            height: 40px;
            line-height: 40px;
        }

        .layui-table td {
            height: 40px;
            line-height: 40px;
        }

        .opacity-background{
            /*background: #000000;*/
            /*color: #ffffff;*/
            /*overflow: hidden;*/
            /*z-index: 4;*/
            /*width: 1140px;*/
            /*height: 140px;*/
            /*position: absolute;*/
            /*bottom: 0;*/
            /*opacity: 0.6;*/
        }

        /*.time-panel{*/
        /*    top: 151px;*/
        /*    z-index: 999;*/
        /*}*/
    </style>
</head>
<body>

<ul class="layui-nav layui-bg-cyan">
    <li class="layui-nav-item">
        <i class="layui-icon">&#xe600;
        </i>
        面试小工具
    </li>
    <li class="layui-nav-item layui-this"><a href="index.html">计时器</a></li>
    <li class="layui-nav-item "><a href="help.html">帮助</a></li>
</ul>

<div class="layui-container">

    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

            <div id="hidden-layer" style="background-color: #1E1E1E
            ;margin-bottom: 1%;height: 20px;
            ;">

            </div>

            <div id="show-layer" style="background-color: #1E1E1E;margin-bottom: 1%;
display: none
">


                <div class="box">


                    <div id="ap1"
                         class="alternate-layout is-preview button-aspect-noir button-aspect-noir--filled skin-wave skin-wave-mode-normal skin-wave-wave-mode-canvas skin-wave-wave-mode-canvas-mode-normal skin-wave-no-reflect design-animateplaypause audioplayer structure-setuped media-setuped meta-loaded listeners-setuped dzsap-loaded scrubbar-loaded"
                         style="width:100%; " data-type="normal" data-reflection-size="0.75">

                        <div class="audioplayer-inner">
                            <div class="the-media">

                            </div>
                            <div class="ap-controls">
                                <div class="scrubbar">


                                    <div id="waveform">

                                    </div>

                                </div>

                                <div class="opacity-background">

                                </div>

                                <div>
                                    <div id="total-time" class="total-time" style="    bottom: 16%;"></div>
                                    <div id="curr-time" class="curr-time " style="    bottom: 16%;">00:00</div>
                                </div>

                                <div class="con-controls">

                                    <div class="con-playpause">

                                        <div class="pausebtn" id="temp-pausebtn" style="display: none" onclick="tempAudioPlayBtn()"></div>

                                        <div class="pausebtn" id="pausebtn" data-action="play" onclick="playAudioBtn()">
                                            <div class="the-icon-bg"></div>
                                            <div class="pause-icon">
                                                <svg id="pauseIconLayer" style="display: none" class="svg-icon"
                                                     version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                     width="12px" height="13px" viewBox="0 0 13.415 16.333"
                                                     enable-background="new 0 0 13.415 16.333" xml:space="preserve"> <path
                                                        fill="#D2D6DB"
                                                        d="M4.868,14.59c0,0.549-0.591,0.997-1.322,0.997H2.2c-0.731,0-1.322-0.448-1.322-0.997V1.618 c0-0.55,0.592-0.997,1.322-0.997h1.346c0.731,0,1.322,0.447,1.322,0.997V14.59z"></path>
                                                    <path fill="#D2D6DB"
                                                          d="M12.118,14.59c0,0.549-0.593,0.997-1.324,0.997H9.448c-0.729,0-1.322-0.448-1.322-0.997V1.619 c0-0.55,0.593-0.997,1.322-0.997h1.346c0.731,0,1.324,0.447,1.324,0.997V14.59z"></path> </svg>

                                                <svg id="playIconLayer" class="svg-icon" version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                     width="11.161px" height="12.817px" viewBox="0 0 11.161 12.817"
                                                     enable-background="new 0 0 11.161 12.817" xml:space="preserve"> <g> <g> <g> <path
                                                        fill="#D2D6DB"
                                                        d="M8.233,4.589c1.401,0.871,2.662,1.77,2.801,1.998c0.139,0.228-1.456,1.371-2.896,2.177l-4.408,2.465 c-1.44,0.805-2.835,1.474-3.101,1.484c-0.266,0.012-0.483-1.938-0.483-3.588V3.666c0-1.65,0.095-3.19,0.212-3.422 c0.116-0.232,1.875,0.613,3.276,1.484L8.233,4.589z"></path> </g> </g> </g> </svg>
                                            </div>
                                        </div>
                                        <svg class="loading-svg" width="30" height="30" viewBox="0 0 44 44"
                                             xmlns="http://www.w3.org/2000/svg" stroke="#fff">
                                            <g fill="none" fill-rule="evenodd" stroke-width="2">
                                                <circle cx="22" cy="22" r="1">
                                                    <animate attributeName="r" begin="0s" dur="1.8s" values="1; 20"
                                                             calcMode="spline" keyTimes="0; 1"
                                                             keySplines="0.165, 0.84, 0.44, 1"
                                                             repeatCount="indefinite"></animate>
                                                    <animate attributeName="stroke-opacity" begin="0s" dur="1.8s"
                                                             values="1; 0" calcMode="spline" keyTimes="0; 1"
                                                             keySplines="0.3, 0.61, 0.355, 1"
                                                             repeatCount="indefinite"></animate>
                                                </circle>
                                                <circle cx="22" cy="22" r="1">
                                                    <animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20"
                                                             calcMode="spline" keyTimes="0; 1"
                                                             keySplines="0.165, 0.84, 0.44, 1"
                                                             repeatCount="indefinite"></animate>
                                                    <animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s"
                                                             values="1; 0" calcMode="spline" keyTimes="0; 1"
                                                             keySplines="0.3, 0.61, 0.355, 1"
                                                             repeatCount="indefinite"></animate>
                                                </circle>
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="meta-artist-con">
                                        <div class="meta-artist">
                            <span class="the-name"><a href="" target="_blank">
                                <span id="fileName"></span></a></span>
                                        </div>
                                    </div>
                                    <div class="ap-controls-right">
                                        <div class="controls-volume">
                                            <div class="volumeicon"></div>
                                            <div class="volume_static"></div>
                                            <div class="volume_active" style="width: 26px;"></div>
                                            <div class="volume_cut"></div>
                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                            </div>
                        </div>
                        <div class="comments-holder active" style="width: 1140px; left: 0px; top: 191.25px;">

                        </div>

                    </div>


                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 center-div">

            <button type="button" class="layui-btn layui-btn-normal"
                    id="uploadButton" style="width: 35%">
                <i class="layui-icon">&#xe6fc;</i>
                选择录音
            </button>
            <button type="button" class="layui-btn layui-btn-primary"
                    onclick="resetPause()">
                重置
            </button>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">

            <table class="layui-table"
                   id="demo" style="text-align: center" lay-data=""
                   lay-filter="dataTable">
                <!--                <colgroup>-->
                <!--                    <col width="0">-->
                <!--                    <col width="150">-->
                <!--                    <col width="200">-->
                <!--                    <col width="200">-->
                <!--                    <col width="200">-->
                <!--                </colgroup>-->
                <thead>
                <tr>
                    <th lay-data="{field:'id',width:'22%'}">题号</th>
                    <th lay-data="{field:'start', event: 'setStart', style:'cursor: pointer;'}">准备</th>
                    <th lay-data="{field:'ready', event: 'setReady', style:'cursor: pointer;'}">开始</th>
                    <th lay-data="{field:'end', event: 'setEnd', style:'cursor: pointer;'}">结束</th>
                    <th lay-data="{field:'pause', event: 'setPause', style:'cursor: pointer '}">卡顿</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align: center;">第一题</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>0</td>
                </tr>
                <tr>
                    <td style="text-align: center;">第二题</td>
                    <td>同上</td>
                    <td></td>
                    <td></td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>第三题</td>
                    <td>同上</td>
                    <td></td>
                    <td></td>
                    <td>0</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="text-align: center">
            <button type="button" class="layui-btn layui-btn-normal"
                    style="width: 50%" onclick="getReport()">
                <!--                <i class="layui-icon">&#xe6fc;</i>-->
                输出结果
            </button>
        </div>
    </div>
</div>


<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/page/index.js" charset="utf-8"></script>


</body>
</html>